<template>
	<view class="issue">
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">纳税记录开具</view>
				<view class="backbtn"></view>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		
		<view class="text">
			<view>温馨提示：</view>
			<view>1.根据《国家税务总局公告2018年第55号》的规定，您可申请开具2019年1月及以后的纳税记录； </view>
			<view>2.每人每天最多可开具三次缴纳记录；</view>
			<view>3.您可以选择注册时所使用的证件或已添加的其他身份证件来开具纳税记录。 <text style="color: #4985E8;">去添加其他身份证件</text> </view>
			<view>4.若您对纳税记录的内容有疑问，请 <text style="color: #4985E8;">点此帮助。</text> </view>
		</view>
		
		<view class="main">
			<view class="acea-row row-middle item bor-bot">
				<view class="left">证件类型</view>
				<view class="right ">居民身份证</view>
			</view>
			<view class="acea-row row-middle item bor-bot">
				<view class="left">证件号码</view>
				<view class="right" style="color: #999999;">{{ card_id }}</view>
			</view>
			<view class="acea-row row-middle item bor-bot">
				<view class="left acea-row row-middle">
					<text>开具年月起 </text>
					<image class="wenhao" src="../../static/images/wenhao.png" mode="aspectFit"></image>
				 </view>
				<view class="right acea-row row-between-wrapper" @click="openstatr">
					<text>{{ startTime[0] }}-{{ startTime[1] }}</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
			<view class="acea-row row-middle item">
				<view class="left acea-row row-middle">
					<text>开具年月止 </text>
					<image class="wenhao" src="../../static/images/wenhao.png" mode="aspectFit"></image>
				 </view>
				<view class="right acea-row row-between-wrapper" @click="openEnd">
					<text>{{ endTime[0] }}-{{ endTime[1] }}</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
		</view>
		
		<pick-date ref="pickDate1" :beginTime="startTime" @onDateConfirm="onConfirm"></pick-date>
		<pick-datecopy ref="pickDate2" :years="endYears" :beginTime="endTime" @onDateConfirm="onConfirmend"></pick-datecopy>
		
		<xiaokeai-humanCheck :show="true" @checkResult="checkResultHandle"></xiaokeai-humanCheck>
		
		<view class="btn" @click="create">生成纳税记录</view>
		
		<view class="look" @click="urlClick('/pages/index/issue-bill')">查看申请记录</view>
		
<!-- 		<uni-popup type="center" ref="popup">
			
		</uni-popup> -->
		<view class="popup acea-row row-middle row-center" v-if="huadongshow">
			<view @click="open">
				<image class="huadong01" src="../../static/images/huadong01.png" mode="aspectFit"></image>
			</view>
		</view>
		
	</view>  
</template>

<script>
	import xiaokeaiHumanCheck from '../../components/xiaokeai-humanCheck/xiaokeai-humanCheck.vue'
	import pickDate from '@/components/john-pickdate/pickDate.vue'
	import pickDatecopy from '@/components/john-pickdate/pickDate-copy.vue'
	import {
		createbill,
		getUserInfo
	} from '@/api/user.js'
	export default {
		components:{
			xiaokeaiHumanCheck,
			pickDate,
			pickDatecopy
		},
		// filters:{
			// code(arr){
				// let str = arr.toString();
				// var reg = /^(\d{1})\d{16}(\d{1})$/;
				// return str.replace(/^(\d{1})\d{16}(.{1}$)/g, `$1${Array(16).join('*')}$2`)
				
				// console.log(typeof(str))
				// let len = str.length-2;
				// let xing = '';
				// for(var i=0;i<len;i++) {
				// 	xing+='*';
				// }
				// return str.substring(0,1)+xing+str.substring(str.length-1);
			// },
		// },
		data() {
			return {
				index:0,
				array:[],
				group_year_id:'',
				startTime:[],
				endTime:[],
				
				is_yan:0,
				endYears:[],
				endMonth:0,
				userinfo:[],
				card_id:'',
				huadongshow:false,
			};
		},
		created() {
			this.getyear();
			this.UserInfo();
		},
		onLoad() {
			
		},
		methods:{
			open(){
				this.huadongshow = !this.huadongshow;
			},
			UserInfo(){
				 getUserInfo().then(res=>{
					this.userinfo = res.data;
					let card_id = res.data.card_id;
					let str = card_id.toString();
					var reg = /^(\d{1})\d{16}(\d{1})$/;
					this.card_id = str.replace(/^(\d{1})\d{16}(.{1}$)/g, `$1${Array(16).join('*')}$2`)
				 })
			},
			create(){
				let that = this;
				// if( !that.is_yan ) return that.$util.Tips({ title : '请先拖动滑块验证' })
				if( !that.is_yan ) return that.huadongshow = true;
				uni.showLoading();
				createbill({
					start_date: that.startTime[0]+'-'+that.startTime[1],
					end_date: that.endTime[0]+'-'+that.endTime[1]
				}).then(res=>{
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/index/issue-bill?is_zhi=1' 
					})
				}).catch(err=>{
					uni.hideLoading()
					return that.$util.Tips({ title : err })
				})
			},
			getyear(){
				let time = new Date();
				let year = time.getFullYear();
				let month = (time.getMonth()+1)>=10 ? (time.getMonth()+1) : '0'+(time.getMonth()+1);
				this.startTime = [year,'01'];
				this.endTime = [year,month];
				this.endYears.push(year)
			},
			openEnd(){
				this.$refs.pickDate2.onOpen();
			},
			onConfirmend(e){
				this.endTime = e;
			},
			onConfirm(e){
				if( e[0] != this.endTime[0] ){
					console.log('不等于');
					this.endYears.unshift(e[0])
				}
				this.startTime = e;
			},
			openstatr(){
				this.$refs.pickDate1.onOpen();
			},
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			},
			checkResultHandle(e){
				this.is_yan = e.detail;
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.issue{
		
		.popup{
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			
			.huadong01{
				width: 500rpx;
				height: 500rpx;
			}
		}
		
		.look{
			text-align: center;
			font-size: 34rpx;
			color: #3C89FD;
			letter-spacing: 4rpx;
		}
		
		.btn{
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 8rpx;
			background-color: #3C89FD;
			color: #ffffff;
			font-size: 34rpx;
			text-align: center;
			margin: 50rpx auto;
			letter-spacing: 4rpx;
		}
		
		.main{
			width: 100%;
			background-color: #ffffff;
			padding: 0 0 0 30rpx;
			margin-top: 20rpx;
			
			.item{
				padding: 25rpx 0;
				font-size: 30rpx;
				
				.left{
					width: 230rpx;
					font-size: 32rpx;
					
					.wenhao{
						width: 30rpx;
						height: 30rpx;
						margin-left: 5rpx;
					}
				}
				.right{
					flex: 1;
					padding-right: 30rpx;
					font-size: 34rpx;
					
					.icon-xiangyou{
						color: #888;
						font-size: 26rpx;
					}
				}
			}
		}
		
		.text{
			width: 100%;
			padding: 30rpx;
			background-color: #EAF4FE;
			color: #333333;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
	}
</style>
